<template>
  <view class="publish-modal" v-if="visible" @click="handleMaskClick">
    <view class="modal-content" @click.stop>
      <!-- 关闭按钮 -->
      <view class="close-btn" @click="closeModal">
        <text class="close-icon">×</text>
      </view>

      <!-- 发活动选项 -->
      <view class="publish-option activity-option" @click="handlePublishActivity">
        <view class="option-content">
          <view class="option-left">
            <view class="option-title">{{ activityConfig.title }}</view>
            <view class="option-subtitle">{{ activityConfig.subtitle }}</view>
          </view>
          <view class="option-right">
            <view class="activity-illustration">
              <!-- 活动插图 -->
            </view>
          </view>
        </view>
      </view>

      <!-- 一键发布按钮 -->
      <view class="quick-publish-btn" @click="handleQuickPublish">
        <text class="quick-publish-text">一键发布</text>
        <text class="quick-publish-arrow">></text>
      </view>

      <!-- 其他选项行 -->
      <view class="other-options">
        <view class="option-row">
          <view
            v-for="option in otherOptions"
            :key="option.id"
            class="option-item"
            :class="`${option.id}-item`"
            @click="handleOptionClick(option)"
          >
            <view class="option-header">
              <text class="option-title">{{ option.title }}</text>
              <text class="option-arrow">></text>
            </view>
            <text class="option-desc">{{ option.desc }}</text>
          </view>
        </view>
      </view>

      <!-- 发动态选项 -->
      <view class="publish-option moment-option" @click="handlePublishMoment">
        <view class="option-content">
          <view class="option-left">
            <view class="option-title">{{ momentConfig.title }}</view>
            <view class="option-subtitle">{{ momentConfig.subtitle }}</view>
          </view>
          <view class="option-right">
            <view class="moment-photos">
              <view class="photo-stack">
                <view class="photo photo1"></view>
                <view class="photo photo2"></view>
                <view class="photo photo3"></view>
              </view>
              <view class="camera-icon">📷</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 活动推荐 -->
      <view class="activity-recommend">
        <view class="recommend-header">
          <text class="recommend-title">{{ recommendConfig.title }}</text>
          <text v-if="recommendConfig.showArrow" class="recommend-arrow">></text>
        </view>
        <scroll-view class="recommend-scroll" scroll-x="true" show-scrollbar="false">
          <view class="recommend-list">
            <view
              v-for="item in recommendList"
              :key="item.id"
              class="recommend-item"
              :style="{ background: item.background, color: item.color }"
            >
              <!-- 渐变类型 -->
              <view v-if="item.type === 'gradient'" class="recommend-content">
                <text class="recommend-text">{{ item.title }}</text>
                <text class="recommend-subtext">{{ item.subtitle }}</text>
              </view>

              <!-- 图片类型 -->
              <image
                v-else-if="item.type === 'image'"
                :src="item.image"
                class="recommend-img"
                mode="aspectFill"
              />

              <!-- 文本类型 -->
              <text v-else-if="item.type === 'text'" class="recommend-large-text">{{ item.text }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  // 发活动配置
  activityConfig: {
    type: Object,
    default: () => ({
      title: '发活动',
      subtitle: '30秒发布，即刻组局'
    })
  },
  // 发动态配置
  momentConfig: {
    type: Object,
    default: () => ({
      title: '发动态',
      subtitle: '活动时刻，分享美好瞬间'
    })
  },
  // 其他选项配置
  otherOptions: {
    type: Array,
    default: () => [
      {
        id: 'wechat',
        title: '微信群入驻',
        desc: '招募优质社群',
        event: 'wechatGroup'
      },
      {
        id: 'host',
        title: '主理人入驻',
        desc: '孵化100万月入过万主理人',
        event: 'hostEntry'
      },
      {
        id: 'special',
        title: '专',
        desc: '一对',
        event: 'specialEntry'
      }
    ]
  },
  // 活动推荐配置
  recommendConfig: {
    type: Object,
    default: () => ({
      title: '10万+ 主理人举办活动',
      showArrow: true
    })
  },
  // 推荐活动列表
  recommendList: {
    type: Array,
    default: () => [
      {
        id: 1,
        type: 'gradient',
        title: '效率出行',
        subtitle: '拼车',
        background: 'linear-gradient(135deg, #4A90E2 0%, #357ABD 100%)',
        color: 'white'
      },
      {
        id: 2,
        type: 'gradient',
        title: '不喝奶茶',
        subtitle: '大挑战',
        background: 'linear-gradient(135deg, #F5A623 0%, #D4861A 100%)',
        color: 'white'
      },
      {
        id: 3,
        type: 'image',
        image: '/static/images/activity-placeholder.jpg',
        background: '#f0f0f0'
      },
      {
        id: 4,
        type: 'text',
        text: '我要导\n送给\n爸爸\n\nFAI\nDA',
        background: 'linear-gradient(135deg, #50E3C2 0%, #4ECDC4 100%)',
        color: '#333'
      },
      {
        id: 5,
        type: 'gradient',
        title: '读书分享',
        subtitle: '每周一本',
        background: 'linear-gradient(135deg, #FF7675 0%, #E84393 100%)',
        color: 'white'
      },
      {
        id: 6,
        type: 'gradient',
        title: '健身打卡',
        subtitle: '21天挑战',
        background: 'linear-gradient(135deg, #00B894 0%, #00CEC9 100%)',
        color: 'white'
      }
    ]
  }
})

// Emits
const emit = defineEmits(['close', 'publishActivity', 'publishMoment', 'quickPublish', 'wechatGroup', 'hostEntry', 'specialEntry'])

// 关闭弹窗
const closeModal = () => {
  emit('close')
}

// 点击遮罩关闭
const handleMaskClick = () => {
  closeModal()
}

// 发活动
const handlePublishActivity = () => {
  emit('publishActivity')
  closeModal()
}

// 发动态
const handlePublishMoment = () => {
  emit('publishMoment')
  closeModal()
}

// 一键发布
const handleQuickPublish = () => {
  emit('quickPublish')
  closeModal()
}

// 微信群入驻
const handleWechatGroup = () => {
  emit('wechatGroup')
  closeModal()
}

// 主理人入驻
const handleHostEntry = () => {
  emit('hostEntry')
  closeModal()
}

// 专项入驻
const handleSpecialEntry = () => {
  emit('specialEntry')
  closeModal()
}

// 处理其他选项点击
const handleOptionClick = (option) => {
  emit(option.event)
  closeModal()
}
</script>

<style scoped>
.publish-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5) !important;
  display: flex;
  align-items: flex-end;
  z-index: 9999 !important;
}

.modal-content {
  width: 100%;
  background: #fff !important;
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 40px 16px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.close-icon {
  font-size: 28px;
  color: #666;
  font-weight: 300;
}


.activity-option {
  background: linear-gradient(135deg, #4ECDC4 0%, #6C5CE7 100%) !important;
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.option-left {
  flex: 1;
  color: white;
}

.option-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.option-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

.option-right {
  width: 100px;
  height: 80px;
  position: relative;
}

.activity-illustration {
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80"><path d="M20 20 L80 20 L70 60 L30 60 Z" fill="rgba(255,255,255,0.3)"/><circle cx="50" cy="40" r="15" fill="rgba(255,255,255,0.5)"/></svg>') no-repeat center;
  background-size: contain;
}


.quick-publish-btn {
  background: #333 !important;
  color: white !important;
  padding: 16px 20px;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.quick-publish-text {
  font-size: 16px;
  font-weight: 500;
}

.quick-publish-arrow {
  font-size: 16px;
}


.other-options {
  margin-bottom: 16px;
}

.option-row {
  display: flex;
  gap: 8px;
}

.option-item {
  flex: 1;
  background: #f5f5f5 !important;
  padding: 16px 12px;
  border-radius: 12px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.option-item .option-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.option-item .option-arrow {
  font-size: 12px;
  color: #999;
}

.option-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

.wechat-item {
  background: #f0f0f0;
}

.host-item {
  background: #f0f0f0;
}

.special-item {
  background: #f0f0f0;
}


.moment-option {
  background: linear-gradient(135deg, #A29BFE 0%, #6C5CE7 100%) !important;
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 20px;
  color: white !important;
  position: relative;
  overflow: hidden;
}

.moment-photos {
  width: 100px;
  height: 80px;
  position: relative;
}

.photo-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.photo {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.photo1 {
  top: 10px;
  left: 10px;
  transform: rotate(-10deg);
}

.photo2 {
  top: 20px;
  left: 30px;
  transform: rotate(5deg);
}

.photo3 {
  top: 5px;
  right: 10px;
  transform: rotate(15deg);
}

.camera-icon {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}



.activity-recommend {
  margin-top: 20px;
}

.recommend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.recommend-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.recommend-arrow {
  font-size: 14px;
  color: #999;
}

.recommend-scroll {
  width: 100%;
  white-space: nowrap;
}

.recommend-list {
  display: flex;
  gap: 8px;
  height: 120px;
  padding-right: 16px;
}

.recommend-item {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  flex-shrink: 0;
}



.recommend-content {
  text-align: center;
  padding: 8px;
}

.recommend-text {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.recommend-subtext {
  font-size: 12px;
  opacity: 0.9;
}

.recommend-large-text {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
  white-space: pre-line;
}

.recommend-img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}


.publish-modal {
  animation: fadeIn 0.3s ease;
}

.modal-content {
  animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.publish-modal {
  box-sizing: border-box;
}

.publish-modal .modal-content {
  color: inherit;
}

.publish-modal .option-title {
  color: inherit !important;
}

.publish-modal .option-subtitle {
  color: inherit !important;
}

.publish-modal .quick-publish-text {
  color: white !important;
}

.publish-modal .recommend-title {
  color: #333 !important;
}
</style>
